<template>
  <div class="reportInfo">
    <!-- 成绩单详情 -->
    <div class="backbtn" @click="backto()" v-if="usertype !== 4">
      返回成绩单列表
    </div>
    <div class="tablistbox">
      <a href="javascript:void(0);" class="active">成绩单详情</a>
    </div>
    <div class="info">
      <div class="bottomInfo">
        <div class="leftEcharts">
          <div class="topstatus">
            <div class="choosefirst" v-if="selectScoreList.length > 1">
              <el-select v-model="scoreId" placeholder="请选择评分表">
                <el-option
                  v-for="item in selectScoreList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </div>
            <div class="choosefirst">
              <!-- <el-input
                v-model="page.projectName"
                placeholder="请输入项目名称"
              ></el-input> -->
              <el-select
                v-model="value"
                value-key="id"
                placeholder="请选择项目名称"
              >
                <el-option
                  v-for="item in projectList1"
                  :key="item.id"
                  :label="item.name"
                  :value="item"
                >
                </el-option>
              </el-select>
            </div>
            <button class="check" @click="queryBtn">查询</button>
          </div>
          <div v-if="statusEacherList && statusEacherList.length > 0">
            <div class="topEcharts">
              <topCon1
                v-if="statusEacherList[0].type === 1"
                :topEchartsData1.sync="statusEacherList[0].list"
              ></topCon1>
              <midCon1
                v-if="
                  statusEacherList[0].type === 2 ||
                  statusEacherList[0].type === 4
                "
                :midEchartsData1.sync="statusEacherList[0].list"
              ></midCon1>
              <bottomCon1
                v-if="statusEacherList[0].type === 3"
                :bottomEchartsData1.sync="statusEacherList[0].list"
              ></bottomCon1>
            </div>
            <p>
              {{ statusEacherList[0].title }}
            </p>
            <div class="midEcharts">
              <topCon2
                v-if="statusEacherList[1].type === 1"
                :topEchartsData2.sync="statusEacherList[1].list"
              ></topCon2>
              <midCon2
                v-if="
                  statusEacherList[1].type === 2 ||
                  statusEacherList[1].type === 4
                "
                :midEchartsData2.sync="statusEacherList[1].list"
              ></midCon2>
              <bottomCon2
                v-if="statusEacherList[1].type === 3"
                :bottomEchartsData2.sync="statusEacherList[1].list"
              ></bottomCon2>
            </div>
            <p class="midEchartsP">
              {{ statusEacherList[1].title }}
            </p>
            <div class="bottomEcharts">
              <topCon3
                v-if="statusEacherList[2].type === 1"
                :topEchartsData3.sync="statusEacherList[2].list"
              ></topCon3>
              <midCon3
                v-if="
                  statusEacherList[2].type === 2 ||
                  statusEacherList[2].type === 4
                "
                :midEchartsData3.sync="statusEacherList[2].list"
              ></midCon3>
              <bottomCon3
                v-if="statusEacherList[2].type === 3"
                :bottomEchartsData3.sync="statusEacherList[2].list"
              ></bottomCon3>
            </div>
            <p>
              {{ Array.isArray(statusEacherList) && statusEacherList[2].title }}
            </p>
          </div>
        </div>
        <div class="rightTable">
          <div class="rightTop">
            <span v-if="selectScoreDetailsList"
              >{{ selectScoreDetailsList.userName }}--{{
                selectScoreDetailsList.departmentName
              }}</span
            >
            <button class="check1" @click="addReportBtn" v-if="usertype !== 4">
              新增
            </button>
          </div>
          <div class="table" v-if="selectScoreDetailsList">
            <el-table
              :data="selectScoreDetailsList.scoreList"
              :header-cell-style="{
                textAlign: 'center',
                color: '#333',
                fontWeight: '400',
                background: '#F1F5FF',
                fontSize: '14px',
                height: '62px',
              }"
              :cell-style="{ textAlign: 'center' }"
              style="width: 98%; margin: 0 auto"
            >
              <el-table-column label="能力" prop="abilityName">
              </el-table-column>
              <el-table-column label="得分">
                <template slot-scope="scope">
                  <span
                    style="color: #69e675"
                    v-show="scope.row.resultPoints > 0"
                  >
                    {{ scope.row.resultPoints }}
                  </span>
                  <span
                    style="color: #d94646"
                    v-show="scope.row.resultPoints < 0"
                  >
                    {{ scope.row.resultPoints }}
                  </span>
                </template>
              </el-table-column>
              <el-table-column label="类型" v-if="usertype === 1">
                <template slot-scope="scope">
                  <span v-if="scope.row.pointsType === 1"> 过程性考核 </span>
                  <span v-if="scope.row.pointsType === 2"> 阶段性考核 </span>
                </template>
              </el-table-column>
              <el-table-column label="项目" prop="projectName">
              </el-table-column>
              <el-table-column label="任务" prop="taskName"></el-table-column>
              <el-table-column
                label="评分时间"
                prop="scoreTime"
              ></el-table-column>
              <el-table-column
                label="评分人"
                prop="scoreUserName"
                v-if="usertype === 1"
              ></el-table-column>
              <el-table-column label="备注" prop="memo"></el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>

    <!-- 新增成绩单 -->
    <el-dialog
      width="60%"
      title="新增成绩单"
      :show-close="false"
      :close-on-click-modal="false"
      :visible.sync="dialogVisible"
      :close-on-press-escape="false"
      top="20vh"
      style="padding: 0"
    >
      <div class="infotable">
        <table cellpadding="0" cellspacing="0">
          <tr height="48">
            <td width="33.33%">
              <div class="inputDeep">
                <el-select
                  v-model="evaluationValue"
                  value-key="id"
                  change="changeValue"
                  placeholder="请选择能力类型"
                >
                  <el-option
                    v-for="item in evaluationList"
                    :key="item.id"
                    :label="item.name"
                    :value="item"
                  >
                  </el-option>
                </el-select>
              </div>
            </td>
            <td width="33.33%">
              <div class="inputDeep">
                <el-select
                  v-model="addScoreResultDto.pointstype"
                  placeholder="请选择考核类型"
                >
                  <el-option
                    v-for="item in typeOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </div>
            </td>
            <td width="33.33%">
              <div>
                <span>得分:</span>
                <input
                  class="inputBox"
                  v-model="addScoreResultDto.points"
                  oninput="if(value.length>5)value=value.slice(0,5);if(value>100)value=100;if(value<-100)value=-100;"
                  min="-100"
                  max="100"
                  type="Number"
                  placeholder="请输入评分"
                />
              </div>
            </td>
          </tr>
          <tr height="48">
            <td width="33.33%">
              <div class="inputDeep">
                <el-select
                  v-model="projectValue"
                  value-key="id"
                  change="changeValue"
                  placeholder="请选择项目"
                >
                  <el-option
                    v-for="item in projectList"
                    :key="item.id"
                    :label="item.name"
                    :value="item"
                  >
                  </el-option>
                </el-select>
              </div>
            </td>
            <td width="33.33%">
              <div class="inputDeep">
                <el-select
                  v-model="taskValue"
                  value-key="id"
                  change="changeValue"
                  placeholder="请选择任务"
                >
                  <el-option
                    v-for="item in taskList"
                    :key="item.id"
                    :label="item.name"
                    :value="item"
                  >
                  </el-option>
                </el-select>
              </div>
            </td>
            <td width="33.33%">
              <div class="timeBox">
                <span>评分时间:</span>
                <span>{{ nowTime }}</span>
                <img src="@/assets/rili.png" alt="" />
              </div>
            </td>
          </tr>
          <tr height="48">
            <td colspan="3">
              <div>
                <span>评分人：</span>
                <span>{{ userName }}</span>
              </div>
            </td>
          </tr>
        </table>
        <div class="remarksBox">
          <p>备注</p>
          <el-input
            maxlength="50"
            class="disbox"
            type="textarea"
            v-model="addScoreResultDto.memo"
            show-word-limit
            placeholder="请输入备注信息（限50字以内）"
          />
        </div>
      </div>
      <div class="btnbox">
        <button class="cancle" @click="cancelBtn">取消</button>
        <button class="edit" v-preventReClick @click="addScoreResultBtn">
          提交
        </button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import topCon1 from '@/components/reportEcharts/top/topCon.vue';
import midCon1 from '@/components/reportEcharts/top/midCon.vue';
import bottomCon1 from '@/components/reportEcharts/top/bottomCon.vue';
import topCon2 from '@/components/reportEcharts/mid/topCon.vue';
import midCon2 from '@/components/reportEcharts/mid/midCon.vue';
import bottomCon2 from '@/components/reportEcharts/mid/bottomCon.vue';
import topCon3 from '@/components/reportEcharts/bottom/topCon.vue';
import midCon3 from '@/components/reportEcharts/bottom/midCon.vue';
import bottomCon3 from '@/components/reportEcharts/bottom/bottomCon.vue';
import {getSelectScoreDetails, getSelectAbilityDetails, getSelectProjectByUser, getSelectTaskByUser, addScoreResult, getSelectScore} from '@/api/repcard/repcard.js';
export default {
  name: 'reportInfo',
  inject: ['reload'],
  data() {
    return {
      selectScoreList: [], // 评分表数据
      scoreId: null, // 评分表id
      dialogVisible: false, // 新增成绩单弹层控制
      nowTime: null, // 当前时间
      userName: sessionStorage.getItem('username'), // 当前用户名称
      usertype: parseInt(sessionStorage.getItem('usertype')), // 当前用户属性 1-系统管理员 3-老师 4-学生
      page: { // 搜索数据
        evaluationId: parseInt(localStorage.getItem('studentEvaluationId')), // 评分表id
        userId: parseInt(localStorage.getItem('studentUserId')), // 当前点击人id
        projectName: '', // 项目名称
        projectId: null // 项目id
      },
      statusEacherList: [], // 学生图表数据
      selectScoreDetailsList: {}, // 成绩单详情数据

      // selectScoreDetailsList: { // 成绩单详情数据
      //   userName: 'admin',
      //   departmentName: '专业2',
      //   scoreList: [
      //     {
      //       abilityName: '名称', // 能力名称
      //       points: 20, // 得分
      //       pointsType: 1, // 类型
      //       projectName: '项目名字', // 项目名称
      //       taskName: '任务名字', // 任务名称
      //       scoreTime: '2022-04-27 17:45:04', // 评分时间
      //       scoreUserName: '哈哈', // 评分人
      //       memo: '备注' // 备注
      //     },
      //     {
      //       abilityName: '能力名称',
      //       points: 10,
      //       pointsType: 1,
      //       projectName: '项目名字',
      //       taskName: '任务名字',
      //       scoreTime: '2022-04-22 12:26:03',
      //       scoreUserName: '哈哈',
      //       memo: '备注'
      //     }
      //   ]
      // },

      typeOptions: [
        {
          value: 1,
          label: '过程性考核'
        },
        {
          value: 2,
          label: '阶段性考核'
        }
      ], // 考核类型
      evaluationList: [], // 能力列表
      evaluationValue: null, // 能力选项
      projectList: [], // 项目列表
      projectValue: null, // 项目选项
      taskList: [], // 任务列表
      projectList1: [], // 项目下拉框列表
      value: null, // 项目下拉框答案
      taskValue: null, // 任务选项
      studentUserId: parseInt(localStorage.getItem('studentUserId')), // 被点击学生id

      addScoreResultDto: { // 新增数据
        buserid: parseInt(localStorage.getItem('studentUserId')), // 被评分人id
        busername: localStorage.getItem('studentUserName'), // 被评分人名字
        evaluationdetailitemid: null, // 所属评分明细项id (能力子项id)
        evaluationdetailitemname: '', // 能力名称
        evaluationid: parseInt(localStorage.getItem('studentEvaluationId')), // 评分表id
        memo: '', // 备注
        points: null, // 得分
        pointstype: 1, // 考核类型
        projectname: '', // 项目名字
        taskid: null, // 任务id
        taskname: '', // 任务名字
        userid: parseInt(sessionStorage.getItem('userid')), // 评分人id
        username: sessionStorage.getItem('username') // 评分人名字
      }

    };
  },
  components: {
    topCon1,
    bottomCon1,
    midCon1,
    topCon2,
    bottomCon2,
    midCon2,
    topCon3,
    bottomCon3,
    midCon3
  },
  created() {
    this.getSelectScore();
    setTimeout(() => {
      this.getSelectScoreDetails();
    }, 500);
  },
  mounted() {
  },
  methods: {
    // 获取评分表、项目下拉框
    async getSelectScore() {
      if (this.usertype === 4) {
        this.studentUserId = parseInt(sessionStorage.getItem('userid'));
      }
      const {data} = await getSelectScore({userId: this.studentUserId, userType: 4});
      this.selectScoreList = data;
      if (data.length === 0) {
        this.scoreId = null;
      } else {
        this.scoreId = data[0].id;
      }
      const {data: data1} = await getSelectProjectByUser({userId: this.studentUserId});
      // console.log(data1);
      this.projectList1 = data1;
    },
    // 获取成绩单详情
    async getSelectScoreDetails() {
      if (this.usertype === 4) {
        // console.log('111');
        this.page = { // 搜索数据
          evaluationId: this.scoreId, // 评分表id
          userId: parseInt(sessionStorage.getItem('userid')) // 当前点击人id
        };
        const res = await getSelectScoreDetails(this.page);
        // console.log(res);
        if (res.code === 200) {
          this.selectScoreDetailsList = res.data;
          this.statusEacherList = res.data.graphicalList;
          // console.log(this.statusEacherList);
        }
        // console.log(this.selectScoreDetailsList);
      } else {
        // console.log('222');
        const res = await getSelectScoreDetails(this.page);
        // console.log(res);
        if (res.code === 200) {
          this.selectScoreDetailsList = res.data;
          this.statusEacherList = res.data.graphicalList;
        }
        // console.log(this.statusEacherList);
        // console.log(this.selectScoreDetailsList);
      }
    },
    // 查询按钮
    async queryBtn() {
      // console.log(this.value);
      this.statusEacherList = null;
      localStorage.setItem('studentEvaluationId', this.scoreId);
      this.page.evaluationId = this.scoreId;
      this.page.projectName = this.value.name;
      this.page.projectId = this.value.id;
      // this.selectScoreDetailsList = null;
      const {data} = await getSelectScoreDetails(this.page);
      // console.log(res);
      this.selectScoreDetailsList = data;
      this.statusEacherList = data.graphicalList;
      // console.log(this.statusEacherList);
      // this.getSelectScoreDetails();
      // this.$router.go(0);
    },
    // 新增成绩单按钮
    addReportBtn() {
      this.getDate();
      this.getSelectAbilityDetails();
      this.getSelectProjectByUser();
      this.getSelectTaskByUser();
      // console.log(this.nowTime);
      this.dialogVisible = true;
    },
    // 查询能力细项下拉框
    async getSelectAbilityDetails() {
      const {data} = await getSelectAbilityDetails({evaluationid: this.page.evaluationId});
      // console.log(data);
      this.evaluationList = data;
    },
    // 查询与自己相关的项目列表
    async getSelectProjectByUser() {
      const {data} = await getSelectProjectByUser({userId: parseInt(localStorage.getItem('studentUserId'))});
      // console.log(data);
      this.projectList = data;
    },
    // 查询与自己相关的任务列表
    async getSelectTaskByUser() {
      const {data} = await getSelectTaskByUser({userId: parseInt(localStorage.getItem('studentUserId'))});
      // console.log(data);
      this.taskList = data;
    },
    // 新增提交按钮
    async addScoreResultBtn() {
      if (this.evaluationValue === null) {
        return this.$message.warning('请选择能力类型！');
      }
      if (this.addScoreResultDto.points === null) {
        return this.$message.warning('请输入评分！');
      }
      if (this.projectValue === null) {
        return this.$message.warning('请选择项目！');
      }
      if (this.taskValue === null) {
        return this.$message.warning('请选择任务！');
      }
      this.addScoreResultDto.evaluationdetailitemid = this.evaluationValue.id;
      this.addScoreResultDto.evaluationdetailitemname = this.evaluationValue.name;
      this.addScoreResultDto.evaluationid = this.page.evaluationId;
      this.addScoreResultDto.projectname = this.projectValue.name;
      this.addScoreResultDto.taskid = this.taskValue.id;
      this.addScoreResultDto.taskname = this.taskValue.name;
      this.addScoreResultDto.points = parseInt(this.addScoreResultDto.points);
      // console.log(this.addScoreResultDto);
      const res = await addScoreResult(this.addScoreResultDto);
      // console.log(res);
      if (res.code === 200) {
        // 提示成功
        this.$message.success('新增成功');
        // 刷新列表
        this.reload();
        // this.$router.go(0);
        // window.location.reload();
        // this.getSelectScoreDetails();
        this.dialogVisible = false;
      } else {
        // 提示失败
        this.$message.error('新增失败');
      }
    },
    // 新增取消按钮
    cancelBtn() {
      this.addScoreResultDto = { // 新增数据
        buserid: parseInt(localStorage.getItem('studentUserId')), // 被评分人id
        busername: localStorage.getItem('studentUserName'), // 被评分人名字
        evaluationdetailitemid: null, // 所属评分明细项id (能力子项id)
        evaluationdetailitemname: '', // 能力名称
        evaluationid: parseInt(localStorage.getItem('studentEvaluationId')), // 评分表id
        memo: '', // 备注
        points: null, // 得分
        pointstype: 1, // 考核类型
        projectname: '', // 项目名字
        taskid: null, // 任务id
        taskname: '', // 任务名字
        userid: parseInt(sessionStorage.getItem('userid')), // 评分人id
        username: sessionStorage.getItem('username') // 评分人名字
      };
      this.dialogVisible = false;
    },
    // 获取当前年月日
    getDate() {
      const nowDate = new Date();
      const date = {
        year: nowDate.getFullYear(),
        month: nowDate.getMonth() + 1,
        date: nowDate.getDate(),
        hours: nowDate.getHours(),
        minutes: nowDate.getMinutes(),
        seconds: nowDate.getSeconds()
      };

      const newmonth = date.month > 10 ? date.month : '0' + date.month;
      const newday = date.date > 10 ? date.date : '0' + date.date;
      const newminutes = date.minutes < 10 ? '0' + date.minutes : date.minutes;
      const newseconds = date.seconds < 10 ? '0' + date.seconds : date.seconds;
      this.nowTime =
        date.year +
        '-' +
        newmonth +
        '-' +
        newday +
        ' ' +
        date.hours +
        ':' +
        newminutes +
        ':' +
        newseconds;
    },

    // -------------------------------------------------
    backto() {
      this.$router.replace('/stu-manage');
    }
  }
};
</script>

<style lang="less" scoped>
/deep/ input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
}

/deep/ input[type="number"] {
  -moz-appearance: textfield;
}
/deep/.el-dialog__wrapper {
  .el-dialog__header {
    width: 100%;
    height: 48px;
    line-height: 48px;
    text-align: center;
    font-size: 16px;
    color: #333;
    background-color: #f1f5ff;
    padding: 0;
  }
  .el-dialog__body {
    padding: 0;
  }
  .btnbox {
    box-sizing: border-box;
    height: 76px;
    border-top: 1px solid #e6ebff;
    .cancle {
      cursor: pointer;
      width: 100px;
      height: 35px;
      background-color: #e8f8fb;
      color: #2fc0e0;
      font-size: 16px;
      border-radius: 5px;
      margin: 20px 60px 0 0;
      margin-left: calc(50% - 130px);
      box-shadow: 0 0 5px #e8f8fb;
    }
    .edit {
      cursor: pointer;
      width: 100px;
      height: 35px;
      background-color: #2fc0e0;
      color: #fff;
      font-size: 16px;
      border-radius: 5px;
      margin-top: 20px;
      box-shadow: 0 0 5px #2fc0e0;
      margin-top: 20px;
    }
  }
  .infotable {
    margin: 33px 0;
    padding: 0 25px;
    overflow: hidden;
    table {
      width: 100%;
      border-left: 1px solid #f1f4ff;
      border-top: 1px solid #f1f4ff;
      tr {
        td {
          transition: all 0.3s;
          padding-left: 20px;
          height: 60px;
          text-align: left;
          border-right: 1px solid #f1f4ff;
          border-bottom: 1px solid #f1f4ff;
          box-sizing: border-box;
          font-size: 12px;
          .inputDeep {
            .el-select {
              width: 95%;
            }
            .el-input__inner {
              width: 90%;
              border: none;
            }
          }
          .inputBox {
            font-size: 12px;
            color: #333;
            border: none;
            width: 80%;
            outline: none;
          }
          .timeBox {
            position: relative;
            span {
              margin-right: 3px;
            }
            img {
              position: absolute;
              top: 0;
              right: 15px;
              width: 23px;
              height: 21px;
            }
          }
        }
        td:focus-within {
          box-shadow: inset 0px 1px 4px 0px #2fc0e0,
            inset 0px -1px 4px 0px #2fc0e0, inset 1px 0px 4px 0px #2fc0e0,
            inset -1px 0px 4px 0px #2fc0e0;
        }
      }
    }
    .remarksBox {
      margin-top: 40px;
      p {
        font-size: 14px;
        color: #333;
      }
      .disbox {
        width: 100%;
        height: 98px;
        font-size: 14px;
        color: #555;
        font-weight: 400;
        padding: 5px;
        border: 1px solid #f1f4ff;
        outline: none;
        box-sizing: border-box;
        .el-textarea__inner {
          padding: 20px;
          height: 100%;
          border: none;
        }
      }
      .disbox:focus-within {
        box-shadow: inset 0px 1px 4px 0px #2fc0e0,
          inset 0px -1px 4px 0px #2fc0e0, inset 1px 0px 4px 0px #2fc0e0,
          inset -1px 0px 4px 0px #2fc0e0;
      }
    }
  }
}
.reportInfo {
  margin: 20px;
  position: relative;
  .backbtn {
    position: absolute;
    right: 0;
    top: 20px;
    color: #333;
    font-size: 16px;
    cursor: pointer;
  }
  a {
    color: #555;
    width: 140px;
    height: 55px;
    border: 1px solid #ececec;
    line-height: 55px;
    font-size: 14px;
    text-align: center;
    background: #ffffff;
    border-radius: 8px 8px 0px 0px;
    border: 1px solid #ececec;
    display: inline-block;
  }
  .active {
    position: relative;
    width: 140px;
    height: 55px;
    line-height: 70px;
    font-size: 16px;
    font-weight: bolder;
    border-bottom: none;
    box-shadow: 1px -2px 3px 0 #99999980;
  }
  .info {
    margin-top: -1px;
    width: 98%;
    box-shadow: 0px 1px 3px 0px rgba(153, 153, 153, 0.5),
      1px -1px 3px 0px rgba(153, 153, 153, 0.5);
    background: white;
    text-align: center;
    padding: 20px;
    margin-bottom: 0;
    .topstatus {
      width: 100%;
      height: 40px;
      margin: 0;
      display: flex;
      .choosefirst {
        margin-right: 40px;
        height: 100%;
        width: 195px;
      }
      .check {
        width: 85px;
        height: 32px;
        background: #2fc0e0;
        border-radius: 2px;
        color: white;
        cursor: pointer;
        box-shadow: 0 0 5px #2fc0e0;
        margin-top: 5px;
      }
    }
    .bottomInfo {
      width: 100%;
      // height: 70vh;
      display: flex;
      justify-content: space-between;
      .leftEcharts {
        width: 30%;
        height: 90%;
        overflow-y: auto;
        margin-top: 10px;
        overflow: hidden;
        .topEcharts,
        .midEcharts,
        .bottomEcharts {
          width: 100%;
          height: 300px;
          margin-top: 20px;
          /deep/ .middle {
            width: 100%;
            height: 100%;
          }
        }
        p {
          margin: 0;
        }
        .midEchartsP {
          margin-top: 20px;
        }
        .chartBox {
          margin-top: 100px;
          font-size: 16px;
          color: #333;
        }
      }
      .rightTable {
        width: 69%;
        .rightTop {
          position: relative;
          width: 100%;
          height: 50px;
          line-height: 50px;
          margin-bottom: 15px;
          .check1 {
            position: absolute;
            top: 7px;
            right: 20px;
            width: 100px;
            height: 35px;
            background: #2fc0e0;
            border-radius: 3px;
            color: white;
            cursor: pointer;
            box-shadow: 0 0 5px #2fc0e0;
          }
        }
        .check1 {
          position: absolute;
          top: 15px;
          right: 20px;
          width: 85px;
          height: 32px;
          background: #2fc0e0;
          border-radius: 3px;
          color: white;
          cursor: pointer;
          box-shadow: 0 0 5px #2fc0e0;
        }
        .table {
          width: 100%;
          /deep/ .el-table__body-wrapper {
            height: 1000px;
            overflow-y: auto;
          }
        }
      }
    }
  }
}
</style>
